@import "./com";

header {
    .h_top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: vw(750);
        height: vw(150);
        // logo
        > img {
            width:vw(125);
        }
        // 搜索框
        > .inp {
            position: relative;
            width: vw(270);
            height: vw(52);
            border: vw(1) solid $col;
            border-radius: vw(26);
            box-sizing: border-box;
            //搜索图标
            &::after {
                content: '';
                position: absolute;
                right: vw(16);
                top: vw(8);
                width: vw(36);
                height: vw(34);
                background: url(../image/index/fangdajing.png) no-repeat top/cover;
            }
            input {
                margin-top: vw(10);
                margin-left: vw(27);
                line-height: vw(34);
                width: vw(183);
                height: vw(34);
                font-size: vw(24);
                border: none;
                outline: none;
            }
        }
        // 地区
        .sel {
            position: relative;
            select {
                width: vw(162);
                height: vw(60);
                border: vw(1) solid $col;
                box-sizing: border-box;
                // 去除三角形默认样式
                -webkit-appearance: none;
                font-size: vw(26);
                text-indent: vw(15);
                background-color: #fff;
            }  
            &::before {
                content: '';
                position: absolute;
                top: 40%;
                right: vw(16);
                width: 0;
                height: 0;
                border-top: vw(20) solid $col;
                border-right: vw(20) solid transparent;
                border-bottom: vw(20) solid transparent;
                border-left: vw(20) solid transparent;
                // 穿透
                pointer-events: none;
            }

        }
        
    }

    .h_bt {
        position: relative;
        width: vw(750);
        overflow: auto;
        > ul {
            width: vw(750 * 3);
            font-size: 0;
            > li {
                display: inline-block;
                width: vw(750);
                height: vw(287);
                overflow: hidden;
                > img {
                    margin-top: -15%;
                    width: 100%;
                }
            }
        }

        .bar {
            position: absolute;
            top: vw(186);
            width: 100%;
            height: vw(10);
            background-color: rgba(0 , 0 , 0,0.5);
            > div {
                position: absolute;
                left: vw(150);
                width: vw(130);
                height: vw(10);
                background-color: rgba(255 , 255 , 255,0.5);
            }
        }
    }
}

main {
    .content {
        margin-top: vw(38);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        > .youhui {
            display: flex;
            justify-content: space-between;
            > div {
                // margin-left: vw(21);
                    > span{
                    font-size: vw(30);
                    }
                    > img {
                        width: vw(57);
                        height: vw(57);
                        vertical-align:middle;
                        }
                }
            > div:nth-of-type(2) {
                    margin-top: vw(3);
                    // margin-right: vw(21);
                        > span{
                        font-size: vw(24);
                        }
                        > img {
                            width: vw(27);
                            height: vw(27);
                            vertical-align:middle;
                            }
                    }
        }
            .lnk {
                margin-top: vw(21);
                display: flex;
                justify-content: space-around;
                width: vw(750);
                height: vw(230);
                .lnk_top {
                    width: vw(242);
                    height: vw(217);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    a {
                        width: vw(244);
                        height: vw(100);
                        img {
                            width: vw(244);
                            height: vw(100);
                        }
                    }
                }
                .lnk_bt{
                    width: vw(242);
                    height: vw(217);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    a {
                        width: vw(244);
                        height: vw(100);
                        img {
                            width: vw(244);
                            height: vw(100);
                        }
                    }
                }
                 
            }

            > .xihuan {
                margin-top: vw(35);
                display: flex;
                justify-content: space-between;
                > div {
                    // margin-left: vw(21);
                        > span{
                        font-size: vw(30);
                        }
                        > img {
                            width: vw(57);
                            height: vw(57);
                            vertical-align:middle;
                            }
                    }
                > div:nth-of-type(2) {
                        margin-top: vw(3);
                        // margin-right: vw(21);
                            > span{
                            font-size: vw(24);
                            }
                            > img {
                                width: vw(27);
                                height: vw(27);
                                vertical-align:middle;
                                }
                        }
            }

            > .chide {
                width: vw(750);
                height: vw(382);
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;
                .chide_top,.chide_bt {
                    width: vw(750);
                    height: vw(160);
                    display: flex;
                    justify-content: space-around;
                    img {
                        width: vw(214);
                        height: vw(167);
                    }
                    .box1,.box2 {
                        width: vw(490);
                        height: vw(167);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        > div:first-of-type {
                            width: vw(497);
                            height: vw(36);
                            display: flex;
                            justify-content: space-between;
                            a {
                                font-size: vw(30);
                                display: inline-block;
                                vertical-align: bottom;
                            }
                            span {
                                font-size: vw(22);
                                color: #494949;
                                margin-top: vw(10);
                            }
                        }
                        p {
                            color: #494949;
                            font-size: vw(22);
                        }
                        > div:nth-of-type(2) {
                            width: vw(497);
                            height: vw(36);
                            display: flex;
                            justify-content: space-between;
                            span:nth-of-type(1) {
                                font-size: vw(32);
                                color: $col;
                            }
                            span:nth-of-type(2) {
                                color: #494949;
                                font-size: vw(22);
                                margin-top: vw(10);
                            }
                        }
                    }
                }
            }
    }
}

nav {
    position: sticky;
    bottom: 0;
    .bt_box{
        display: flex;
        justify-content: space-around;
        width: vw(750);
        height: vw(110);
        background-color: #fff;
        div {
            display: inline-block;
            width: vw(73);
            text-align: center;
            a {
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }
}